import { use as useEcharts } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { LineChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from "echarts/components";
import { getChartsOptions, zkbzZdObj } from "@utils";
import { TxProps } from "./prop";
import { uniqueObjsArr } from "@ui/utils/arr";
import { getXAxis } from './getXAxis'

export function use(props: TxProps) {
  const chartOptions = computed(() => {
    const list = props.data as LisZksjItem[]
    if (list && list.length) {
      const xAxis = ['', ...getXAxis(list), '']
        , { kssj, jssj, zbmc, zkgzdldm, yqmc } = props.param
      return uniqueObjsArr(props.zkbz || [], ['pxxh', 'zbjg', 'zkbz']).map(yAxis1 => {
        const legendArr = yAxis1.map(it => it[0])
          , yAxis = ['', ...yAxis1[0].map(it => it.zbjg), '']
        return getChartsOptions(
          `仪器名称：${yqmc}控项目：${zbmc} 日期区间：${kssj} - ${jssj}\n质控规则：${zkgzdldm || ''} `,
          xAxis,
          yAxis,
          legendArr.map(({ zkpid, ph, mc, yxq, gys }) => {
            const data = {}
            list.forEach(it => {
              if (it.zkpid == zkpid) {
                data[it.jlrqcs] = it.cs1
              }
            })
            return {
              name: `----批号：${ph || ""}【质控品】名称：${mc || ""} 效期：${yxq || ""} 供应商：${gys || ""} 【${yAxis1[0].map(it => {
                return `${it.zbjg}:${zkbzZdObj[it.zkbz]}`
              }).join(';')}】`,
              data: xAxis.map(key => data[key] || null),
              type: 'line',
              connectNulls: true
            }
          })
        )
      })
    } else
      return undefined
  })
  useEcharts([
    CanvasRenderer,
    GridComponent,
    LineChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
  ])
  return { chartOptions }
}